<!--
 * @Author: your name
 * @Date: 2022-03-28 09:44:46
 * @LastEditTime: 2022-04-01 17:57:41
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \beijing-dushixiang-manyuan\src\components\button\buttonPage.vue
-->
<template>
  <!--  editor 类判断是否在当前页面面展示-->
  <div class="button_box">
    <div class="button-wrap" v-permission="'order_delete'">
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-edit"
        class="editor"
        data-tracker="P2-4"
        @click="ListDelete"
        :loading="deleteLoading"
        >删除</el-button
      >
      <!-- <ButOrder :selectedNums="selectedNums" :displayOrders="displayOrders"></ButOrder> -->
    </div>
    <div
      class="button-wrap"
      v-permission="[
        'order_action_accept',
        'order_action_void',
        'order_action_cancel_void',
        'order_action_cancel_accept',
      ]"
    >
      <el-dropdown
        trigger="click"
        :hide-on-click="false"
        class="openBut"
        style="margin-bottom: 40px"
      >
        <el-button type="primary" plain size="mini">
          订单操作<i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown" class="open">
          <el-dropdown-item
            @click.native="Agency"
            v-permission="'order_action_accept'"
          >
            <span>受理</span>
          </el-dropdown-item>
          <el-dropdown-item
            @click.native="Cancellation"
            v-permission="'order_action_void'"
          >
            <span>作废</span>
          </el-dropdown-item>
          <el-dropdown-item
            @click.native="cancelCancellation"
            v-permission="'order_action_cancel_void'"
          >
            <span>取消作废</span>
          </el-dropdown-item>
          <el-dropdown-item
            @click.native="cancelDelete"
            v-permission="'order_action_cancel_accept'"
          >
            <span>取消受理</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div
      class="button-wrap"
      style="margin-bottom: 40px"
      v-permission="'order_import'"
    >
      <el-button
        id="import_order_button"
        type="primary"
        plain
        size="mini"
        icon="el-icon-upload2"
        class="improtput"
        data-tracker="P2-9"
        @click="toLead"
        >导入</el-button
      >
    </div>
    <div
      class="button-wrap"
      style="margin-bottom: 40px"
      v-permission="'order_export'"
    >
      <el-button
        type="primary"
        plain
        size="mini"
        icon="el-icon-download"
        class="improtOut"
        data-tracker="P2-10"
        :loading="loadingfalse"
        @click="handleExport"
      >
        导出
      </el-button>
    </div>
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-plus"
      class="addList"
      @click="handleAddNotice"
      >新建
    </el-button>
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-s-order"
      class="release"
      @click="publishNotice"
      >发布
    </el-button>
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-refresh-right"
      class="revoke"
      @click="cancelNotice('撤销')"
    >
      撤销</el-button
    >
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-finished"
      class="OKready"
      @click="cancelNotice('已读')"
      >标记已读
    </el-button>
    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-delete"
      class="Delete"
      @click="handleDelete"
      >删除
    </el-button>
    <el-button type="primary" plain size="mini" class="zuofei">作废</el-button>
    <el-button type="primary" plain size="mini" class="clearZF"
      >取消作废</el-button
    >
    <el-button type="primary" plain size="mini" class="clearSL"
      >取消受理</el-button
    >

    <el-button
      type="primary"
      plain
      size="mini"
      icon="el-icon-printer"
      @click="dialogVisibleShowFn"
      class="print"
      >打印
    </el-button>
    <el-button
      type="primary"
      plain
      size="mini"
      @click="dialogVisibleFaceClickFn"
      class="printfacesheet"
      >打印面单
    </el-button>
    <el-button
      type="primary"
      plain
      size="mini"
      class="printWd"
      @click="dialogVisibletemperatureFn"
      >打印温度</el-button
    >
    <el-dialog
      title="打印标签"
      :visible.sync="dialogVisible"
      width="497px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="qianzhi_content" id="printMe">
        <div class="qianzhi_top">
          <div class="top_left"><img :src="logo" />渡石医药</div>
          <div class="top_right">
            <span
              >{{ qianzhiInfo.total_commodity_number }} — {{ printTime }}</span
            >
            <i>{{ qianzhiInfo.create_time }}</i>
          </div>
        </div>
        <div class="qianzhi_tm">
          <div style="height: 60px; margin-left: 5px">
            <canvas id="canvas"></canvas>
          </div>
          <div
            style="
              font-size: 16px;
              letter-spacing: 20px;
              margin-top: -10px;
              margin-left: 15px;
            "
          >
            {{ orderDetail.order_code }}-{{ printTime }}
          </div>
        </div>
        <div class="qianzhi_address">
          <span class="span1">目的地</span>
          <span
            >{{ qianzhiInfo.customer_province_name }} -
            {{ qianzhiInfo.receiver_province_name }}</span
          >
        </div>
        <div class="qianzhi_sjr">
          <span class="span2">收件人</span>
          <span>
            <i>{{ qianzhiInfo.receiver_name }}</i>
            <i
              >{{ qianzhiInfo.receiver_province_name
              }}{{ qianzhiInfo.receiver_city_name
              }}{{ qianzhiInfo.receiver_county_name
              }}{{ qianzhiInfo.receiver_address }}</i
            >
            <i>{{ qianzhiInfo.receiver_phone }}</i>
          </span>
        </div>
        <div class="shangj_code">
          <span class="span1">温区</span>
          <span>共<i></i>件</span>
          <span>当前第<i></i>件</span>
        </div>
        <div class="qianzhi_detail">
          <div class="detail_left">
            <span>发货人</span>
          </div>
          <div class="detail_right">
            <span>运输方式</span>
            <div class="detail_c">
              <div>
                {{ qianzhiInfo.transport_carrier }}
              </div>
              <div>
                <font>重量：{{ goods_weight }}</font
                ><i></i>
              </div>
              <div>
                <font>体积：{{ goods_size }}</font
                ><i></i>
              </div>
              <div>
                <font>数量：{{ commodity_number }}</font
                ><i></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleClickBqFn">取 消</el-button>
        <el-button type="primary" v-print="'#printMe'">打 印</el-button>
      </span>
    </el-dialog>
    <!-- 导入模板的 -->
    <el-drawer
      title="创建订单"
      :visible.sync="drawer"
      size="50%"
      :with-header="false"
      :wrapperClosable="false"
    >
      <div>
        <div class="header">
          <span class="order-title">导入订单</span>
          <div class="order-right">
            <span class="order-close">
              <i
                id="close_order_import"
                class="el-icon-close"
                @click="orderclose"
              />
            </span>
          </div>
        </div>
        <div class="body_center">
          <div class="first_step">
            <div style="color: #378cbe">操作流程:</div>
            <div>
              <span>第一步:</span>
              <span>&nbsp;&nbsp;下载导入模板</span>
              <el-button type="primary" style="float: right">
                <span class="el-icon-download"></span>
                <span
                  :href="ApiurlHtml"
                  style="color: #ffffff"
                  @click="reductionDown"
                  data-tracker="P2-17"
                  >下载模板</span
                >
              </el-button>
            </div>
            <!-- <div>
              <span style="color: #ff9a00">
                如需要调整模板字段,点击模板设置</span>
              <el-button type="primary" style="float: right">
                <span class="el-icon-download"></span>
                <span :href="ApiurlHtml" style="color: #ffffff" @click="reductionDown" data-tracker="P2-17">下载模板</span>
              </el-button>
            </div> -->
          </div>
          <div class="second_step">
            <div>第二步:</div>
            <div>
              <span style="color: #ff9a00; float: left">
                文件不超过2M,建议先上传少量数据测试导入数据的有效性
              </span>
              <div style="float: right; text-align: right">
                <el-upload
                  id="upload_import_order_excel"
                  class="upload-demo"
                  ref="add-upload"
                  action
                  multiple
                  :auto-upload="false"
                  :limit="1"
                  :on-exceed="onexceedfunt"
                  :file-list="business_license"
                  :on-change="
                    (file, fileList) => {
                      handleChange(file, fileList, 29);
                    }
                  "
                  :on-remove="
                    (file, fileList) => {
                      removeChange(file, fileList, 29);
                    }
                  "
                >
                  <el-button
                    slot="trigger"
                    type="primary"
                    size="mini"
                    icon="el-icon-upload2"
                    data-tracker="P2-18"
                    >上传文件</el-button
                  >
                </el-upload>
              </div>
            </div>
          </div>
          <div class="third_step">
            <div>
              <span>第三步:&nbsp;&nbsp;提交导入</span>
              <el-button
                id="submit_import"
                type="primary"
                :loading="loadingState"
                icon="el-icon-thumb"
                style="float: right"
                @click="derive()"
                data-tracker="P2-19"
                >提交导入</el-button
              >
            </div>
          </div>
          <div class="four_step">
            <div>导入结果:&nbsp;&nbsp;</div>
          </div>
          <el-table
            id="import_result"
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="upload_url" label="导入文件" width="200">
              <template slot-scope="scope">
                <span
                  style="color: #409eff; cursor: pointer"
                  @click="openUrl(scope.row.upload_url)"
                  >{{ scope.row.upload_url }}</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="schedule" label="导入进度" width="120">
            </el-table-column>
            <el-table-column label="导入结果">
              <template slot-scope="scope">
                <div v-if="scope.row.process_count > 0">
                  <i
                    class="el-icon-circle-check"
                    style="color: #67c23a; padding: 0px 2px 0px 0px"
                  ></i
                  >导入成功{{ scope.row.process_count }}条
                </div>
                <div v-if="scope.row.failed_count > 0">
                  <i
                    class="el-icon-circle-close"
                    style="color: #f56c6c; padding: 0px 2px 0px 0px"
                  ></i>
                  <span>导入失败{{ scope.row.failed_count }}条 , </span>
                  <span
                    @click="openUrl(scope.row.download_url)"
                    style="color: #409eff; cursor: pointer"
                    >{{ scope.row.upload_url | failedCapita }}</span
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0px 10px 0px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              :total="PageBreak.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import ButOrder from "../../page/orderform/components/ButOrder/index.vue";
import {
  reqExportNotice,
  customerImport,
  deleteOrder,
  assignmentStatus,
  cancelAcceptance,
  procRejection,
  cancelRejection,
  OrdewEcho,
  recordList,
} from "../../api/orderForm";
import { uploading } from "../../page/material/common/common";
import signpaperPop from "../facesheet/signpaper.vue";
import logoVImg from "@/assets/img/logo.png";
import moment from "moment";
import jsbarcode from "jsbarcode";
import {
  reqPublishNotice,
  reqCancelNotice,
  reqDeleteNotice,
} from "@/api/message";
import { getToken } from "@/utils/auth";
import { sendClickTracker } from "@/utils/tracker";
import { isCancel } from "ali-oss/lib/common/parallel";
export default {
  name: "Allorder",
  props: [
    "selectedNums",
    "displayOrders",
    "addNotice",
    "displayNoticeTable",
    "orderIdNums",
    "statusId",
    "exportdata",
  ],
  components: { ButOrder, signpaperPop }, //facesheetPop
  data() {
    return {
      deleteLoading: false,
      loadingfalse: false,
      logo: logoVImg,
      toLead_result: "",
      // tiaomaImg: tiaomaVImg,
      // smaImg: smaVImg,
      // titleImg: titleVImg,
      dialogVisible: false, //这个是打印预览的对话框
      dialogVisibleFaceFn: false, //打印面单
      dialogVisibletemperature: false,
      drawer: false,
      innerDrawer: false,
      WearValue: [], //显示列的数据
      WearData: [],
      //url: process.env.VUE_APP_URL,
      url: process.env.VUE_APP_TEST,
      apiUrl: "https://oss.dushisc.com/4/1664343678332订单批量导入模.xlsx",
      ApiurlHtml: "",
      resources_uri: "",
      reqUrl: "",
      resour_url: "",
      fileList: [],
      business_license: [],
      // 选择大区
      distrct: [
        {
          value: "测试大区",
        },
        {
          value: "华北",
        },
        {
          value: "华中",
        },
        {
          value: "华东",
        },
        {
          value: "华南",
        },
        {
          value: "华西西安",
        },
        {
          value: "华西成都",
        },
      ],
      orderDetail: {},
      qianzhiInfo: {},
      printTime: 1,
      goods_weight: "",
      goods_size: "",
      commodity_number: "",
      loadingState: false,
      tableData: [],
      timer: null,
      currentPage4: 1,
      PageBreak: {
        page: 1,
        page_size: 10,
        total: 0,
      },
    };
  },
  computed: {
    isModify() {
      if (this.$store.state.orderForm.selectedSum === 1) {
        return false;
      } else {
        return true;
      }
    },
  },
  filters: {
    failedCapita(value) {
      return "导出错误数据";
    },
  },
  methods: {
    //设置导入模板
    LeadTemplate() {
      this.innerDrawer = false;
    },
    reductionDown() {
      // 可以自定义订单号
      if (this.$store.state.user.setting_list[0].item_value == "1") {
        var DownUrl =
          "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/qms/1715326960802%E8%AE%A2%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF-%E5%8F%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8D%95%E5%8F%B7.xlsx";
         window.open(DownUrl,"_blank");
      } else {
        // 不能自定义订单号
        var DownUrl =
          "https://dus-company-log-img.oss-cn-beijing.aliyuncs.com/qms/1715326913489%E8%AE%A2%E5%8D%95%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
         window.open(DownUrl,"_blank");
      }
    },
    orderclose() {
      clearInterval(this.timer);
      this.drawer = false;
      this.locationReload();
    },
    toLead() {
      this.drawer = true;
      this.TimedTask();
    },
    // 上传到oss上
    handleChange(file, fileList, type) {
      var filelist = file.raw; //文件
      var filename = file.raw.uid + file.raw.name; //通过 uid和name组成文件的名字
      uploading(filelist, filename, type).then((result) => {
        var resname = result.name;
        this.ImportDataUrl = resname;
        var resType = resname.split("/")[0];
        var filehttp = "http://oss.dushisc.com/";
        //this.ImportDataUrl = filehttp + resname
        switch (resType) {
          case "29":
            this.business_license.push({
              name: filehttp + result.name,
            });
            break;
        }
      });
    },
    // 删除调用
    removeChange(file, fileList, type) {
      switch (type) {
        case 29:
          if (this.business_license.length > 0) {
            for (var i = 0; i < this.business_license.length; i++) {
              if (this.business_license[i].uid == file.uid) {
                this.business_license.splice(i, 1);
              }
            }
          }
          break;
      }
    },
    derive() {
      this.loadingState = true;
      const data = {
        file_name: this.ImportDataUrl,
        header_id: "8",
      };
      customerImport(data).then((res) => {
        this.loadingState = false;
        if (res.code === 10000) {
          this.ObjrecordList();
        } else {
          var msg = res.msg;
          this.ContentSuccess(msg);
        }
      });
    },
    onexceedfunt() {
      let msg = "请勿上传多个文件";
      this.ContentSuccess(msg);
    },
    ContentSuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
      });
    },
    async dialogVisibleShowFn() {
      this.dialogVisible = true;
      var params = {
        order_code: this.selectedNums[0],
        token: getToken("Cookie"),
      };
      let result = await OrdewEcho(params);
      this.orderDetail = result.data;
      jsbarcode("#canvas", this.orderDetail.order_code, {
        lineColor: "#000",
        width: 2.5,
        height: 40,
        displayValue: false,
      });
      this.qianzhiInfo = result.data;
      for (var i = 0; i < result.data.good_list.length; i++) {
        this.goods_weight = result.data.good_list[i].goods_weight;
        this.goods_size = result.data.good_list[i].goods_size;
        this.commodity_number = result.data.good_list[i].commodity_number;
      }
      // let weight = 0;
      // let size = 0;
      // let number = 0;
      // this.qianzhiInfo.goods_weight = result.data.good_list.map((item) => {
      //   weight + item.goods_weight;
      //   return weight;
      // })[0];
      // this.qianzhiInfo.goods_size = result.data.good_list.map((item) => {
      //   size + item.goods_size;
      //   return size;
      // })[0];
      // this.qianzhiInfo.commodity_number = result.data.good_list.map(
      //   (item) => {
      //     number + item.commodity_number;
      //     return number;
      //   }
      // )[0];
    },
    dialogVisibleFaceClickFn() {
      this.dialogVisibleFaceFn = true;
    },
    dialogVisibleFaceClickFnresule() {
      this.dialogVisibleFaceFn = false;
    },
    dialogVisibletemperatureFn() {
      this.dialogVisibletemperature = true;
    },
    dialogVisibleClickBqFn() {
      this.dialogVisible = false;
      this.printTime = 1;
    },
    dialogVisibleClickFn() {
      this.dialogVisibletemperature = false;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloseFace() {
      this.dialogVisibleFaceFn = false;
    },
    handleCloseWendu() {
      this.dialogVisibletemperature = false;
    },

    handleAddNotice() {
      this.addNotice();
    },
    async publishNotice() {
      //发布公告
      await reqPublishNotice(this.selectedNums[0]); //目前先只能发布一个
      this.displayNoticeTable();
    },
    cancelNotice(info) {
      this.$confirm(`您是否确认${info}这些公告？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await reqCancelNotice(this.selectedNums[0]);
          this.$message({
            type: "success",
            message: `${info}成功!`,
          });
          this.displayNoticeTable();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消${info}`,
          });
        });
    },
    handleDelete() {
      this.$confirm(`您是否确认删除这些公告？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await reqDeleteNotice(this.selectedNums[0]);
          this.$message({
            type: "success",
            message: `删除成功!`,
          });
          this.displayNoticeTable();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: `已取消删除`,
          });
        });
    },
    // 导出
    handleExport() {
      this.loadingfalse = true;
      var data = {
        ids: this.orderIdNums.map(Number),
        ...this.exportdata,
      };
      reqExportNotice(data).then((res) => {
        if (res.code === 10000) {
          this.reqUrl = "https://" + res.data.loaded_url;
          window.open(this.reqUrl);
          this.loadingfalse = false;
        }
      });
    },
    //删除接口
    async ListDelete() {
      if (this.orderIdNums.length > 0) {
        this.deleteLoading = true;
        var objselectedNums = {
          ids: this.orderIdNums,
          token: getToken("Cookie"),
        };
        deleteOrder(objselectedNums).then((res) => {
          // console.log(res, "res");
          if (res && res.code === 10000) {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.displayOrders(1, 10);
            this.deleteLoading = false;
          } else {
            this.deleteLoading = false;
          }
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择至少一项数据删除！",
        });
      }
    },
    // 取消受理
    cancelDelete() {
      if (this.orderIdNums.length > 0) {
        if (this.statusId.includes("2")) {
          this.$message({
            type: "warning",
            message: "订单作废状态不能操作取消受理处理！",
          });
        } else {
          var objselectedNums = {
            ids: this.orderIdNums,
            token: getToken("Cookie"),
          };
          cancelAcceptance(objselectedNums).then((res) => {
            if (res.code === 10000) {
              this.$message({
                type: "success",
                message: "取消受理成功",
              });
              this.displayOrders(1, 10);
            } else {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择至少一项数据取消受理！",
        });
      }
      sendClickTracker("P2-8");
    },
    // 取消作废,点击事件
    cancelCancellation() {
      this.canceValue = "取消作废";
      if (this.orderIdNums.length > 0) {
        var serleList = {
          ids: this.orderIdNums,
          token: getToken("Cookie"),
        };
        cancelRejection(serleList).then((res) => {
          if (res.code === 10000) {
            this.$message({
              type: "success",
              message: "取消作废成功",
            });
            this.displayOrders(1, 10);
          } else {
            this.$message({
              type: "success",
              message: res.message,
            });
          }
        });
      } else {
        this.$message({
          type: "warning",
          message: "请选择至少一项数据取消作废！",
        });
      }
      sendClickTracker("P2-7");
    },
    // 作废
    Cancellation() {
      if (this.orderIdNums.length > 0) {
        this.$prompt("作废原因", "作废订单", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPlaceholder: "请输入作废原因",
          inputErrorMessage: "输入不能为空",
          inputValidtaor: (value) => {
            if (!value) {
              return "输入不能为空";
            }
          },
        })
          .then(({ value }) => {
            this.canceValue = "作废";
            var serleList = {
              ids: this.orderIdNums,
              token: getToken("Cookie"),
              rejection_reason: value,
            };
            procRejection(serleList).then((res) => {
              if (res.code === 10000) {
                this.$message({
                  type: "success",
                  message: "作废成功",
                });
                this.displayOrders(1, 10);
              } else {
                this.$message({
                  type: "success",
                  message: res.message,
                });
              }
            });
            sendClickTracker("P2-21");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消作废",
            });
          });
      } else {
        this.$message({
          type: "warning",
          message: "请选择至少一项数据作废！",
        });
      }
      sendClickTracker("P2-6");
    },
    // 点击受理
    Agency() {
      if (this.orderIdNums.length > 0) {
        if (this.statusId.includes("2")) {
          this.$message({
            type: "warning",
            message: "订单已转单!",
          });
        } else {
          this.$confirm("确定要受理所选订单吗?", "受理订单", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              var objselectedNums = {
                ids: this.orderIdNums.map((item) => item * 1),
                token: getToken("Cookie"),
              };
              assignmentStatus(objselectedNums).then((res) => {
                if (res.code === 10000) {
                  this.$message({
                    type: "success",
                    message: "受理成功",
                  });
                  this.displayOrders(1, 10);
                } else {
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                }
              });
              sendClickTracker("P2-20");
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消受理",
              });
            });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请选择至少一项数据操作受理！",
        });
      }
      sendClickTracker("P2-5");
    },
    // 修改后的提示
    ContentSuccess(msg) {
      this.$message({
        message: msg,
        type: "success",
      });
    },
    // 导入请求的接口信息
    ObjrecordList() {
      var param = {
        type: "order", //导入列表类型，order表示订单
        page: this.PageBreak.page,
        page_size: this.PageBreak.page_size,
      };
      recordList(param).then((res) => {
        this.PageBreak.total = res.data.pagination.total;
        if (res.data.list != null) {
          this.ObjrecorTable(res.data.list);
        }
      });
    },
    // 处理数据的函数
    ObjrecorTable(Datalist) {
      Datalist.forEach((item) => {
        item.upload_url =
          item.upload_url == ""
            ? ""
            : "http://oss.dushisc.com/" + item.upload_url;
        item.schedule = item.process_end_time > 0 ? "导入完成" : "导入中";
      });
      this.tableData = Datalist;
    },
    TimedTask() {
      this.timer = setInterval(() => {
        this.ObjrecordList();
      }, 30000);
    },
    openUrl(file) {
      window.open(file);
    },
    handleSizeChange(val) {
      this.PageBreak.page_size = val;
      this.ObjrecordList();
    },
    handleCurrentChange(val) {
      this.PageBreak.page = val;
      this.ObjrecordList();
    },
    // 强制刷新当前页面
    locationReload() {
      location.reload();
    },
  },
  mounted() {
    this.ObjrecordList();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="less" scoped>
// /deep/.el-button + .el-button {
//   margin-left: 5px !important;
// }

/deep/.el-dialog__body {
  padding: 0px !important;
}

/deep/.el-dialog__header {
  display: none !important;
}

/deep/.qianzhi_content .el-checkbox__label {
  color: #000 !important;
}

/deep/.el-drawer__header {
  display: none !important;
}
.button_box {
  // float: left;
  display: flex;
  flex-wrap: wrap;
  height: 38px;
}
.button_box .improtOut a {
  color: #409eff;
}
.button_box .improtOut a:hover {
  color: #fff;
}
.button_box .improtOut:hover a {
  color: #fff;
}
.Wear_reduction_box {
  padding-left: 4%;
  margin-top: 20px;
}

.Wear_reduction_download {
  float: right;
  padding-right: 40px;
  margin-top: 20px;
}

.wenkong_content {
  width: 286px;
  height: 286px;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: auto;

  .wenkong_top_title {
    width: 100%;
    text-align: center;
    height: 60px;
    line-height: 60px;
    font-weight: bold;
    font-size: 18px;
    color: #000;
  }

  .wenkong_top {
    padding: 0 20px;
    height: 20px;
    line-height: 20px;

    span {
      display: block;
      float: left;
      color: #000;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .wenkong_code {
    height: 20px;
    line-height: 20px;
    font-weight: bold;
    padding: 0 20px;

    ul {
      list-style: none;
      margin: 0px;
      padding: 0px;

      li {
        line-height: 20px;

        span {
          float: left;
          font-size: 14px;
          color: #000;
          font-weight: 500;
        }

        .rightspan {
          float: right;
        }
      }
    }
  }
}

.qianzhi_content {
  width: 495px;
  min-height: 495px;
  overflow: hidden;
  border: 1px dashed #000;

  .qianzhi_top {
    height: 50px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    .top_left {
      font-size: 24px;
      color: #000;
      float: left;
      font-weight: bold;
      line-height: 45px;
      padding-left: 10px;

      img {
        width: 50px;
        height: 50px;
        float: left;
        margin-right: 10px;
      }
    }

    .top_right {
      float: right;
      text-align: center;
      margin-right: 10px;
      margin-top: 3px;

      span {
        font-size: 18px;
        font-weight: bold;
        display: block;
      }

      i {
        font-size: 12px;
        margin-top: -3px;
        display: block;
      }
    }
  }

  .qianzhi_tm {
    height: 80px;
    border-bottom: 1px dashed #000;
    img {
      width: 493px;
      height: 80px;
    }
  }

  .qianzhi_address {
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    span {
      display: block;
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
    }

    .span1 {
      width: 90px;
      text-align: center;
      display: block;
      border-right: 1px dashed #000;
    }
  }

  .qianzhi_sjr {
    height: 100px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    span {
      display: block;
      float: left;

      i {
        display: block;
        line-height: 30px;
        padding-left: 5px;
      }
    }

    .span2 {
      width: 26px;
      padding: 21px 22px 22px 47px;
      border-right: 1px dashed #000;
    }
  }

  .shangj_code {
    height: 30px;
    overflow: hidden;
    border-bottom: 1px dashed #000;

    span {
      display: block;
      float: left;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
    }

    .span1 {
      width: 90px;
      text-align: center;
      display: block;
      border-right: 1px dashed #000;
    }
  }

  .qianzhi_detail {
    min-height: 200px;

    .detail_left {
      width: 49%;
      float: left;
      display: block;
      min-height: 200px;
      border-right: 1px dashed #000;

      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
      }
    }

    .detail_right {
      width: 50.5%;
      float: left;
      display: block;
      min-height: 200px;

      span {
        display: block;
        width: 100%;
        height: 30px;
        line-height: 30px;
        padding-left: 5px;
      }

      .detail_c {
        overflow: hidden;

        div {
          width: 100%;
          height: 33px;
          line-height: 33px;
          border-bottom: 1px dashed #000;

          span {
            display: block;
            float: left;
            width: 28%;
            text-align: center;
            height: 20px;
            line-height: 20px;
          }

          font {
            display: block;
            float: left;
            padding-left: 5px;
          }

          i {
            display: block;
            float: left;
          }
        }
      }
    }
  }
}

.facesheet_all {
  width: 1065px;
  border: 1px solid #000;
  height: auto;
  overflow: hidden;
}

.facesheet_top {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-bottom: 1px solid #000;
}

.facesheet_t_l {
  width: 679px;
  height: auto;
  overflow: hidden;
  float: left;
  border-right: 1px solid #000;
}

.logo_img {
  width: 108px;
  height: 88px;
  float: left;

  img {
    width: 108px;
    height: 88px;
  }
}

.logo_title {
  width: 222px;
  height: 88px;
  float: left;
  margin-left: 20px;
  margin-right: 20px;

  img {
    width: 222px;
    height: 88px;
  }
}

.logo_content {
  width: 308px;
  height: auto;
  overflow: hidden;
  float: left;

  h2 {
    width: 100%;
    font-family: "微软雅黑";
    font-size: 22px;
    margin-top: 5px;
  }

  span {
    display: block;
    width: 100%;
    margin-top: 5px;
  }
}

.facesheet_t_r {
  width: 379px;
  float: left;
  margin-left: 5px;
  margin-top: 4px;

  img {
    width: 400px;
    height: 80px;
  }
}

.facesheet_mid {
  width: 100%;
  height: auto;
  overflow: hidden;

  .facesheet_mid_l {
    width: 650px;
    height: auto;
    overflow: hidden;
    float: left;
    border-bottom: 1px solid #000;

    .facesheet_mid_l_o {
      width: 325px;
      height: auto;
      overflow: hidden;
      float: left;

      .mid_title {
        height: 25px;
        background: #e69850;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        line-height: 25px;
        color: #fff;
        padding-left: 10px;
        font-size: 12px;
      }

      .mid_list {
        padding-left: 10px;
        border-right: 1px solid #000;
        min-height: 100px;

        span {
          display: block;
          height: 35px;
          line-height: 35px;
          font-size: 12px;
        }
      }
    }

    .facesheet_mid_l_t {
      width: 325px;
      height: auto;
      overflow: hidden;
      float: left;

      .mid_title {
        height: 25px;
        background: #e69850;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        line-height: 25px;
        color: #fff;
        padding-left: 10px;
        font-size: 12px;
      }

      .mid_list {
        padding-left: 10px;
        border-right: 1px solid #000;

        span {
          display: block;
          height: 35px;
          line-height: 35px;
          font-size: 12px;
        }
      }

      .mid_list_desc {
        min-height: 100px;
      }
    }
  }

  .facesheet_mid_r {
    width: 415px;
    height: auto;
    overflow: hidden;
    float: left;

    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
      font-size: 12px;
    }

    .mid_r_content {
      min-height: 266px;
      border-bottom: 1px solid #000;
      background: #e69850;

      div {
        overflow: hidden;
        min-height: 28px;

        span {
          display: block;
          float: left;
          color: #fff;
          font-size: 12px;
          padding-left: 10px;
        }
      }
    }
  }
}

.facesheet_bottom {
  width: 100%;
  min-height: 240px;
  overflow: hidden;

  .facesheet_bottom_l {
    width: 225px;
    min-height: 175px;
    overflow: hidden;
    float: left;

    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
      font-size: 12px;
    }

    .bottom_content {
      overflow: hidden;
      border-right: 1px solid #000;
      min-height: 214px;

      span {
        display: block;
        float: left;
        width: 100%;
        line-height: 55px;
        padding-left: 10px;
        font-size: 12px;

        i {
          display: block;
          float: left;
        }

        b {
          display: block;
          float: left;
          margin-left: 22px;
        }

        u {
          text-decoration: none;
        }
      }
    }
  }

  .facesheet_bottom_m {
    width: 225px;
    min-height: 240px;
    overflow: hidden;
    float: left;

    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
      font-size: 12px;
    }

    .bottom_content {
      overflow: hidden;
      border-right: 1px solid #000;
      min-height: 214px;

      span {
        display: block;
        float: left;
        width: 100%;
        line-height: 55px;
        padding-left: 10px;
        font-size: 12px;

        i {
          display: block;
          float: left;
        }

        b {
          display: block;
          float: left;
          margin-left: 22px;
        }

        u {
          text-decoration: none;
        }
      }
    }
  }

  .facesheet_bottom_r {
    width: 200px;
    height: auto;
    overflow: hidden;
    float: left;

    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
      font-size: 12px;
    }

    .bottom_value {
      min-height: 214px;
    }

    .value_span {
      height: auto;
      overflow: hidden;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;

      span {
        display: block;
        font-size: 12px;
        clear: both;
        line-height: 30px;

        font {
          float: left;
        }

        i,
        b {
          display: block;
        }

        b {
          font-weight: normal;
          margin-top: -7px;
        }

        u {
          float: right;
          text-decoration: none;
          margin-right: 5px;
        }
      }
    }

    .value_img {
      height: 100px;
      text-align: center;
      overflow: hidden;
      border-right: 1px solid #000;

      img {
        width: 68px;
        height: 68px;
        padding-top: 15px;
      }
    }
  }

  .facesheet_bottom_ll {
    float: left;
  }

  .facesheet_bottom_rr {
    width: 415px;
    height: auto;
    overflow: hidden;
    float: left;

    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
      font-size: 12px;
    }

    .mid_r_content {
      min-height: 214px;
      background: #e69850;

      div {
        line-height: 28px;
      }
    }
  }
}

// 头部信息
.header {
  width: 100%;
  height: 36px;
  background: #5a6d82;
  line-height: 36px;

  .order-title {
    color: #fff;
    font-size: 14px;
    padding-left: 12px;
  }

  .order-right {
    position: absolute;
    right: 0;
    top: 0;
    height: 35px;
    line-height: 35px;

    .order-close {
      height: 35px;
      display: inline-block;
      overflow: hidden;
      position: relative;
      padding: 0 10px;
      cursor: pointer;
      color: #fff;
    }
  }
}

// 中间信息
.body_center {
  width: 98%;
  height: 400px;
  // border: 1px solid #dddddd;
  margin: 10px auto;

  .first_step {
    width: 98%;
    height: 70px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .second_step {
    width: 98%;
    min-height: 62px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
    overflow: hidden;
  }

  .third_step {
    width: 98%;
    height: 45px;
    margin: 12px auto;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .four_step {
    width: 98%;
    margin: 12px auto;
    padding-bottom: 10px;
    font-size: 13px;
    line-height: 27px;
    border: 1px dashed #dddddd;
    border-top: none;
    border-right: none;
    border-left: none;
  }
}
.button-wrap + .button-wrap {
  margin-left: 10px;
}
</style>
